<template>
	<div class="mytabbar-wrapper">
		<div v-for="(menu,index) in iconNames" 
			 @click="selectTabItem(index+1)" 
			 class="mytabbar-item" 
			 :class="{'selected-mytabbar-item':selectedItem==index+1}">
			<icon :name="menu" slot='icon' scale="5"></icon>
			<span slot="label" class="sf">{{menuNames[index]}}</span>
		</div>
	</div>
</template>
<script>
import bus from '../vuex/bus.js'

export default {
	data() {
		return {
			selectedItem: 1,
			mainRouters: ['search', 'helpother', 'myexpress', 'personalcenter'],
			iconNames: ['search', 'helpOhter', 'myExpress', 'personalCenter'],
			menuNames: ['查询快递', '帮拿快递', '我的快递', '个人中心']
		}
	},
	methods: {
		selectTabItem(index) {
			var self = this;
			this.selectedItem = index;
			this.$router.push({ name: self.mainRouters[index - 1] })
		}
	},
	mounted(){
		var self = this;
		bus.$on('selecteMenuChanged',function(selectedMenu){
			self.selectedItem = selectedMenu;
		})
	},
	created() {}


}
</script>
<style scoped>
.mytabbar-wrapper {
	display: flex;
	position: absolute;
	z-index: 500;
	bottom: 0;
	width: 100%;
	height: 1.5rem;
	background-color: #F7F7FA;
	border-top: 1px solid #ccc;
}

.selected-mytabbar-item {
	color: #09BB07!important;
	background-color: #E6E6E6;
}

.mytabbar-item {
	flex: auto;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #707070;
}
</style>
